<script setup>
import { ref } from "vue";
import { useStore } from "../../store/store";

const store = useStore();
const src = ref("");
const userInfo = ref(uni.getStorageSync("agent"));
console.log(userInfo.value);
src.value = userInfo.value.agentImg || "../../static/agentImg.png";
const editAvatar = () => {
  uni.chooseImage({
    count: 1,
    success: (imageRes) => {
      console.log(imageRes);
      uni.showLoading({
        title: "上传中",
        mask: false,
      });
      uni.uploadFile({
        url: "https://www.xingchengwenhua.com:8081/api/agentImg",
        // url: "https://www.xingchengwenhua.com:8081/api/agentImg",
        filePath: imageRes.tempFilePaths[0],
        name: "img",
        formData: {
          agentId: userInfo.value.agentId,
        },
        success: (res) => {
          uni.hideLoading();
          console.log(JSON.parse(res.data));
          src.value = JSON.parse(res.data).data;
          userInfo.value.agentImg = src.value;
          uni.setStorageSync("agent", userInfo.value);
        },
        fail: (fail) => {
          console.log(fail);
        },
      });
    },
  });
};
const goReset = () => {
  uni.navigateTo({ url: "/pages/login/reset" });
};
</script>

<template>
  <view class="page">
    <view class="avatar">
      <text>头像</text>
      <image @click="editAvatar" class="img" :src="src" mode="" />
    </view>
    <view class="avatar">
      <text>账号</text>
      <text class="id">{{ store.userInfo.phone }}</text>
    </view>
    <view @click="goReset" class="avatar" style="margin-top: 24rpx; height: 108rpx">
      <text>修改密码</text>
      <image
        class="arrow"
        src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/home_fanhui.png"
        mode=""
      />
    </view>
  </view>
</template>

<style lang="scss" scoped>
.page {
  position: absolute;
  width: 100%;
  height: 100%;
  .avatar {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30rpx;
    font-size: 30rpx;
    color: rgb(48, 49, 51);
    background-color: #fff;
    .img {
      width: 80rpx;
      height: 80rpx;
      border-radius: 50%;
    }
    .id {
      font-size: 28rpx;
      color: rgb(144, 147, 153);
    }
    .arrow {
      width: 38rpx;
      height: 38rpx;
    }
  }
}
</style>
